<template>
	<view class="container">
		<!-- 内容区域 -->
		<scroll-view class="container--scroll-view" @scrolltolower="onScrollToLower" :scroll-y="true" @scroll="onScrollEvent" :style="{ height: scrollHeight + 'px' }">
			<!-- 砍价会场 -->
			<block v-if="currentTab == 0">
				<!-- banner轮播 -->
				<!-- <diy-banner itemStyle="{{ banner.style }}" params="{{ banner.params }}" dataList="{{ banner.data }}"></diy-banner> -->

				<!-- 内容区域 -->
				<view class="bargain-hall">
					<!-- 商品列表 -->
					<view class="goods-item" v-for="item in activeList.data" :key="item.active_id">
						<form @submit="onTargetActive" report-submit="true" :data-id="item.active_id">
							<button formType="submit" class="btn-normal">
								<view class="goods-item--container dis-flex">
									<!-- 商品图片 -->
									<view class="goods-image"><image :src="item.goods.goods_image"></image></view>
									<view class="goods-info">
										<!-- 商品名称 -->
										<view class="goods-name">
											<text class="twolist-hidden">{{ item.goods.goods_name }}</text>
										</view>
										<!-- 参与的用户头像 -->
										<view v-if="item.helps_count > 0" class="peoples dis-flex">
											<view class="user-list dis-flex">
												<view v-for="(help, index) in item.helps" :key="index" class="user-item-avatar"><image :src="help.avatarUrl"></image></view>
											</view>
											<view class="people__text">
												<text>{{ item.helps_count }}人正在砍价</text>
											</view>
										</view>
										<!-- 商品原价 -->
										<view class="goods-price">
											<text>￥{{ item.goods.goods_sku.goods_price }}</text>
										</view>
										<!-- 砍价低价 -->
										<view class="floor-price">
											<text class="small">最低￥</text>
											<text class="big">{{ item.floor_price }}</text>
										</view>
										<!-- 操作按钮 -->
										<view class="opt-touch">
											<view class="touch-btn"><text>立即参加</text></view>
										</view>
									</view>
								</view>
							</button>
						</form>
					</view>
					<!-- 无数据提供的页面 -->
					<view v-if="!isLoading && !activeList.data.length">
						<view class="yoshop-notcont">
							<text class="iconfont icon-wushuju"></text>
							<text class="cont">亲，暂无砍价活动哦</text>
						</view>
					</view>
				</view>
			</block>
			<!-- 我的砍价 -->
			<block v-if="currentTab == 1">
				<!-- 内容区域 -->
				<view class="bargain-hall">
					<!-- 商品列表 -->
					<view class="goods-item" v-for="(item, index) in myList.data" :key="item.task_id">
						<form @submit="onTargetTask" report-submit="true" :data-id="item.task_id">
							<button formType="submit" class="btn-normal">
								<view class="goods-item--container dis-flex">
									<!-- 商品图片 -->
									<view class="goods-image"><image :src="item.goods.goods_image"></image></view>
									<view class="goods-info">
										<!-- 商品名称 -->
										<view class="goods-name">
											<text class="twolist-hidden">{{ item.goods.goods_name }}</text>
										</view>
										<!-- 砍价进度 -->
										<view class="task-rate">
											<block v-if="item.status">
												<text>已砍</text>
												<text class="col-m">{{ item.cut_money }}</text>
												<text>元，</text>
												<text>只差</text>
												<text class="col-m">{{ item.surplus_money }}</text>
												<text>元</text>
											</block>
											<block v-if="item.is_floor">
												<text>已砍至最低</text>
												<text class="col-m">{{ item.floor_price }}</text>
												<text>元</text>
											</block>
										</view>
										<!-- 任务状态 -->
										<view class="task-status dis-flex flex-y-center">
											<!-- 倒计时 -->
											<view v-if="item.status" class="count-down dis-flex flex-y-center">
												<view class="clock-text"><text>剩余</text></view>
												<view class="clock dis-flex">
													<view class="clock-time">
														<text>{{ countDownList[index].dynamic.hou }}</text>
													</view>
													<view class="clock-symbol"><text>:</text></view>
													<view class="clock-time">
														<text>{{ countDownList[index].dynamic.min }}</text>
													</view>
													<view class="clock-symbol"><text>:</text></view>
													<view class="clock-time">
														<text>{{ countDownList[index].dynamic.sec }}</text>
													</view>
												</view>
											</view>
											<view v-if="!item.status" class="task-status__text">
												<text class="col-m">{{ item.is_buy ? '砍价成功' : '已结束' }}</text>
											</view>
										</view>
										<!-- 操作按钮 -->
										<view v-if="item.status" class="opt-touch">
											<view class="touch-btn"><text>继续砍价</text></view>
										</view>
									</view>
								</view>
							</button>
						</form>
					</view>
					<view v-if="noMore" class="no-more f-28">亲, 没有更多了</view>
					<!-- 无数据提供的页面 -->
					<view v-if="!isLoading && !myList.data.length">
						<view class="yoshop-notcont">
							<text class="iconfont icon-wushuju"></text>
							<text class="cont">亲，暂未参与砍价活动哦</text>
						</view>
					</view>
				</view>
			</block>
		</scroll-view>

		<!-- 底部选项卡 -->
		<view class="footer-fixed dis-flex">
			<!-- 砍价会场 -->
			<view class="tabbar-item flex-box " :class="{ item__active: currentTab == 0 }">
				<form @submit="onToggleTab" data-index="0" report-submit="true">
					<button formType="submit" class="btn-normal">
						<view class="tabbar-item-content dis-flex flex-x-center flex-y-center">
							<view class="tabbar-item-icon"><text class="iconfont icon-shangcheng"></text></view>
							<view class="tabbar-item-name"><text>砍价会场</text></view>
						</view>
					</button>
				</form>
			</view>
			<!-- 分割线 -->
			<view class="tabbar-item__divider"><view class="divider-line"></view></view>
			<!-- 我的砍价 -->
			<view class="tabbar-item flex-box" :class="{ item__active: currentTab == 1 }">
				<form @submit="onToggleTab" data-index="1" report-submit="true">
					<button formType="submit" class="btn-normal">
						<view class="tabbar-item-content dis-flex flex-x-center flex-y-center">
							<view class="tabbar-item-icon"><text class="iconfont icon-sy-yh"></text></view>
							<view class="tabbar-item-name"><text>我的砍价</text></view>
						</view>
					</button>
				</form>
			</view>
		</view>
	</view>
</template>

<script>
import diyBanner from '@/components/diy/banner/banner.vue';
import Tools from '@/utils/Tools.js';
import CountDown from '@/utils/countdown.js';
import Route from '@/utils/Route.js';
export default {
	components: { diyBanner },
	data() {
		return {
			// 当前tab索引
			currentTab: 0,

			// 列表容器高度
			scrollHeight: null,

			// 列表容器滚动的位置
			scrollTop: 0,

			noMore: false, // 没有更多数据
			isLoading: true, // 是否正在加载中
			page: 1, // 当前页码

			// 时间记录
			countDownList: [],

			// 砍价会场商品列表
			activeList: [],

			// 我的砍价列表
			myList: []
		};
	},
	onLoad(options) {
		this.setListHeight();
		this.setCurrentTab(options);
	},
	onShow() {
		if (this.scrollTop == 0) {
			// 获取列表数据
			this.getList();
		}
	},
	/**
	 * 用户点击右上角分享
	 */
	onShareAppMessage() {
		// 构建页面参数
		let params = Tools.getShareUrlParams();
		return {
			title: '砍价专区',
			path: `/pages/bargain/index/index?${params}`
		};
	},

	methods: {
		/**
		 * 设置当前tab索引
		 */
		setCurrentTab(options) {
			let _this = this;
			if (options.hasOwnProperty('tab')) {
				this.currentTab = options.tab;
			}
		},
		/**
		 * 设置商品列表高度
		 */ setListHeight() {
			let systemInfo = uni.getSystemInfoSync();
			let tapHeight = uni.upx2px(92 + 20); // tap高度
			this.scrollHeight = systemInfo.windowHeight - tapHeight; // swiper高度
		},
		/**
		 * 获取列表数据
		 */
		getList(isPage) {
			this.currentTab == 0 ? this.getActiveList(isPage) : this.getMyList(isPage);
		},
		/**
		 * 获取我的砍价列表
		 */
		getMyList(isPage) {
			this.$get(this.$api.getBargainTaskLists, { page: this.page || 1 }, res => {
				let resList = res.data.myList;
				let dataList = this.myList;
				if (isPage == true) {
					this.$set(this.myList, 'data', dataList.data.concat(resList.data));
					this.isLoading = false;
				} else {
					this.myList = resList;
					this.isLoading = false;
				}
				// 初始化倒计时组件
				this.initCountDownData(res.data);
			});
		},
		/**
		 * 获取砍价活动列表
		 */
		getActiveList(isPage) {
			this.$get(this.$api.getBargainActiveLists, { page: this.page || 1 }, res => {
				let resList = res.data.activeList;
				let dataList = this.activeList;
				if (isPage == true) {
					this.$set(this.activeList, 'data', dataList.data.concat(resList.data));
					this.isLoading = false;
				} else {
					this.activeList = resList;
					this.isLoading = false;
				}
			});
		},

		/**
		 * 初始化倒计时组件
		 */
		initCountDownData(data) {
			// 记录活动到期时间
			let countDownList = this.countDownList;
			data.myList.data.forEach(item => {
				countDownList.push({
					date: item.end_time
				});
			});
			this.countDownList = countDownList;

			// 执行倒计时
			if (countDownList.length > 0) {
				CountDown.onSetTimeList(this, 'countDownList');
			}
		},
		/**
		 * 切换tabbar
		 */
		onToggleTab(e) {
			// 保存formid
			this.$saveFormId(e.detail.formId);
			// 设置当前tabbar索引，并重置数据
			this.currentTab = e.currentTarget.dataset.index;
			this.activeList = [];
			this.activeList = [];
			this.page = 1;
			this.isLoading = true;
			this.noMore = false;

			// 获取列表数据
			this.getList();
		},
		/**
		 * 跳转到砍价商品详情
		 */
		onTargetActive(e) {
			// 保存formid
			this.$saveFormId(e.detail.formId);
			Route.navigateTo({
				url: `../goods/index?active_id=${e.currentTarget.dataset.id}`
			});
		},

		/**
		 * 跳转到砍价任务详情
		 */
		onTargetTask(e) {
			// 保存formid
			this.$saveFormId(e.detail.formId);
			Route.navigateTo({
				url: `../task/index?task_id=${e.currentTarget.dataset.id}`
			});
		},
		/**
		 * 下拉到底部加载下一页
		 */
		onScrollToLower() {
			let listData = this.currentTab == 0 ? this.activeList : this.myList;
			// 已经是最后一页
			if (this.page >= listData.last_page) {
				this.noMore = true;
				return false;
			}
			// 加载下一页列表
			this.page = ++this.page;

			this.getList(true);
		}
	}
};
</script>

<style>
.container {
	height: 100%;
}
.bargain-hall {
	padding-top: 20rpx; /* padding-bottom: 50rpx; */
} /* 砍价商品 */
.goods-item {
	margin-bottom: 20rpx;
	background: #fff;
	padding: 20rpx 16rpx;
}
.goods-item:last-child {
	margin-bottom: 0;
}
.goods-item .goods-image image {
	display: block;
	width: 220rpx;
	height: 220rpx;
}
.goods-item .goods-info {
	width: 498rpx;
	padding-top: 8rpx;
	margin-left: 15rpx;
	position: relative;
}
.goods-item .goods-info .goods-name {
	font-size: 28rpx;
	min-height: 60rpx;
} /* 正在参与的用户 */
.goods-item .goods-info .peoples {
	margin-top: 15rpx;
}
.goods-item .goods-info .peoples .user-list {
	margin-right: 10rpx;
}
.goods-item .goods-info .peoples .user-list .user-item-avatar {
	margin-left: -8rpx;
}
.goods-item .goods-info .peoples .user-list .user-item-avatar:first-child {
	margin-left: 0;
}
.goods-item .goods-info .peoples .user-list .user-item-avatar image {
	display: block;
	width: 36rpx;
	height: 36rpx;
	border-radius: 50%;
}
.goods-item .goods-info .peoples .people__text {
	font-size: 24rpx;
	color: #818181;
} /* 商品原价 */
.goods-item .goods-info .goods-price {
	margin-top: 15rpx;
	color: #818181;
	font-size: 25rpx;
	text-decoration: line-through;
} /* 砍价底价 */
.goods-item .goods-info .floor-price {
	color: #fc1e56;
}
.goods-item .goods-info .floor-price .small {
	font-size: 24rpx;
}
.goods-item .goods-info .floor-price .big {
	font-size: 32rpx;
} /* 我的砍价 */ /* 砍价进度 */
.goods-item .task-rate {
	font-size: 25rpx;
	color: #a4a4a4;
	margin-top: 15rpx;
} /* 砍价状态 */
.task-status {
	margin-top: 32rpx;
	height: 58rpx; /* line-height: 58rpx; */
}
.task-status__text {
	font-size: 26rpx;
} /* 倒计时 */
.count-down {
	font-size: 26rpx;
	height: 40rpx;
}
.count-down .clock-text {
	margin-right: 10rpx;
}
.count-down .clock-time {
	background: #252525;
	color: #fff;
	padding: 0 8rpx;
	line-height: 40rpx;
	border-radius: 8rpx;
}
.clock-symbol {
	padding: 0 8rpx;
} /* 立即参加按钮 */
.opt-touch {
	position: absolute;
	bottom: 0;
	right: 10rpx;
}
.touch-btn {
	color: #fff;
	font-size: 28rpx;
	background: #d3a975;
	border-radius: 30rpx;
	padding: 10rpx 28rpx;
} /* 底部选项卡 */
.tabbar-item {
	font-size: 30rpx;
}
.tabbar-item .tabbar-item-content {
	height: 92rpx;
}
.tabbar-item.item__active .tabbar-item-content {
	color: #ff1d1c;
}
.tabbar-item .tabbar-item-icon {
	margin-right: 15rpx;
} /* 分割线 */
.tabbar-item__divider {
	padding: 18rpx 0;
}
.divider-line {
	width: 1rpx;
	height: 100%;
	background: #ddd;
}
</style>
